<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar title="编辑资料" left-arrow @click-left="$router.back()" fixed />

    <!-- 用户资料 -->
    <!-- 点击标签让文件选择窗口出现:
    思路1: 让label关联一个input[type=file]的标签, 把input隐藏(css)起来, 点击label就相当于点击到了input上 (前提label的for属性的值, input的id一样)
    思路2: 点击一个标签后, 用js获取input[type=file]的标签, js函数方式, 触发它的click事件 -->
    <van-cell-group class="action-card">
      <van-cell title="头像" is-link center @click="imageBtn">
        <template #default>
          <van-image round class="avatar" :src="profile.photo"/>

          <!-- file 选择框 -->
            <input
            type="file"
            ref="iptFile"
            v-show="false"
            accept="image/*"
            @change="fileChangeFn"
            />
        </template>
      </van-cell>
      <van-cell title="名称" is-link  :value="profile.name" @click="changeNameFn"/>
      <van-cell title="生日" is-link  :value="profile.birthday"
      @click="changeBirthFn"
      />
    </van-cell-group>

      <!-- 26.7 --点击修改名字组件 -->
      <van-dialog
      v-model="show"
      title="修改名字"
      show-cancel-button
      :beforeClose="confirmFn"
      >
        <van-field
        ref="fieldRef"
        input-align="center"
        v-model="value"
        placeholder="请输入用户名"
        />
      </van-dialog>
      <!-- 26.8修改生日反馈面板 -->
      <van-action-sheet v-model="showBirth" title="修改生日">
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="confirmBirthFn"
        />
      </van-action-sheet>
  </div>
</template>

<script>
import { getProfileAPI, upUserPhotoAPI, updateProfileAPI } from '@/api'
import { mapMutations, mapState } from 'vuex'
import Notify from '@/ui/Notify'
export default {
  name: 'UserEdit',
  //   26.5编辑页面
  data () {
    return {
      // profile: {} // 简介
      show: false, // 改名的弹出框是否显示
      value: '', // 输入框名字(把默认名字显示到输入框里)
      showBirth: false, // 修改生日的反馈面板
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2021, 3, 9),
      currentDate: new Date(2021, 3, 9) // 当前默认时间(v-model用，选择的时间也会在这个变量上)
    }
  },
  // 26.5.1编辑--存储
  computed: {
    ...mapState('user', ['profile', 'user'])
  },
  methods: {
    ...mapMutations('user', ['setProfile', 'setUser']),
    // 26.6更换头像--图片点击事件
    imageBtn () {
      this.$refs.iptFile.click()
    },
    async fileChangeFn (ev) {
      console.log(ev.target.files)
      // 26.6
      // 文件-发给后台(文件用FormData装起来)
      // HTML5出了一个新的构造函数 new FormData() - 表单数据
      const fd = new FormData()
      // key名就是发给后台的参数名  后台对上, 把文件对象放到参数2上
      fd.append('photo', ev.target.files[0])
      const [, res] = await upUserPhotoAPI(fd)
      //   console.log(res)
      //   this.profile.photo = res.data.data.photo
      // 把新的头像合并到旧的profile对象上, 更新到vuex中, vuex的profile更新了上面用到这个变量的地方都更新了
      this.setProfile({ ...this.profile, photo: res.data.data.photo })
      this.setUser({ ...this.user, photo: res.data.data.photo }) // 右面新的photo覆盖前面photo的值
    },
    // 26.7点击修改名字
    async changeNameFn () {
      this.show = true
      this.value = this.profile.name // 把默认名字显示到输入框里
      this.$nextTick(() => {
        this.$refs.fieldRef.focus()
      })
    },

    async confirmFn (action, done) {
      // 1.点击取消--正常关闭
      if (action === 'cancel') return done()
      // 2.点击确认--用正则判断
      if (/^[a-zA-Z\u4e00-\u9fa5]{1,7}$/.test(this.value)) {
        // 3.调用接口--关闭弹窗
        const [err, res] = await updateProfileAPI({
          name: this.value
        }) // 409(说明要发送/请求的资源，存在冲突)--name的名字如果409，改一个即可(可能后台做了唯一性校验)
        // 👉补充：名字重复的409处理？
        // 或err?.response?.status ：如果err有值才会继续访问
        if (err && err.response && err.response.status === 409) {
          Notify({ type: 'danger', message: '用户名已存在' })
          done(false)
        } else {
          console.log(res)
          // 4. 26.7.2请求成功了，要把名字保存起来并且更新
          const newName = res.data.data.name
          const obj = { ...this.profile }
          obj.name = newName
          this.setProfile(obj)
          this.setUser({ ...this.user, name: res.data.data.name })
          done()
        }
      } else {
        Notify({ type: 'warning', message: '用户名只能是1-7位英文/中文组合' })
        done(false) // 不要让弹窗关闭
      }
    },
    // 26.8 修改生日--反馈面板方法
    async changeBirthFn () {
      this.showBirth = true
      // 点击单元格让时间选择器出现-给页面上的默认生日(注意格式加上new Date才相等)
      // 问题：为什么上面是3，显示的是4月；我们给8，显示就是8月？
      // 上面new Date(2021, 3, 1)
      // 现在new Date("2021-3-1")
      this.currentDate = new Date(this.profile.birthday)
    },
    async confirmBirthFn () {
      const year = new Date(this.currentDate).getFullYear()
      const month = new Date(this.currentDate).getMonth() + 1
      const day = new Date(this.currentDate).getDate()
      const str = `${year}-${month}-${day}`
      const [, res] = await updateProfileAPI({
        birthday: str
      })
      // 请求成功，关闭弹窗
      this.showBirth = false
      console.log(res)
      this.setProfile({ ...this.profile, birthday: str })
    }
  },
  async created () {
    const [, res] = await getProfileAPI()
    // console.log(res)
    // this.profile = res.data.data
    this.setProfile(res.data.data)
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
